<template>
   <div id="base" class="body">

      <!-- Unnamed (Rectangle) -->
      <div id="u0" class="ax_default heading_1">
        <div id="u0_div" class=""></div>
        <div id="u0_text" class="text ">
          <p><span>管理员</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1" class="ax_default heading_2">
        <div id="u1_div" class=""></div>
        <div id="u1_text" class="text ">
          <p><span>欢迎使用，见实力·认证机构信息管理系统</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u2" class="ax_default box_1">
        <div id="u2_div" class="">
          <p v-for="item in J1List" style="margin-left: 3px;color:#003366">
             {{item.khmc}}的{{ item.txmc }}证书进入{{ item.dshlx }}审核周期
          </p>
        </div>
        <div id="u2_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3" class="ax_default box_1">
        <div id="u3_div" class="">
           <p v-for="item in J2List" style="margin-left: 3px;color:#003366">
           {{item.khmc}}的{{ item.txmc }}证书进入{{ item.dshlx }}审核周期
           </p>
        </div>
        <div id="u3_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u4" class="ax_default box_1">
        <div id="u4_div" class="">
          <p v-for="item in DskList" style="margin-left: 3px;color:#003366">
            {{item.khmc}}的{{ item.txmc }}有款项({{ item.skxm }})未收，请及时处理           
           </p>
        </div>
        <div id="u4_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5" class="ax_default box_1">
        <div id="u5_div" class="">
          <p v-for="item in DkzList" style="margin-left: 3px;color:#003366">
           {{item.skf}}在{{ item.khmc }}的{{ item.txmc }}项目有款项({{ item.kzxm }})未支付，请及时处理
           </p>
        </div>
        <div id="u5_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u6" class="ax_default box_1">
        <div id="u6_div" class="">
           <MyTodo :Width="345" :Data="TodoList" @Read="handleMessageRead" @Detail="hanndleMessageDetail">

          </MyTodo>
        </div>
        <div id="u6_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u7" class="ax_default heading_3">
        <div id="u7_div" class=""></div>
        <div id="u7_text" class="text ">
          <p><span>待监一</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8" class="ax_default heading_3">
        <div id="u8_div" class=""></div>
        <div id="u8_text" class="text ">
          <p><span>待监二</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9" class="ax_default heading_3">
        <div id="u9_div" class=""></div>
        <div id="u9_text" class="text ">
          <p><span>待收款</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u10" class="ax_default heading_3">
        <div id="u10_div" class=""></div>
        <div id="u10_text" class="text ">
          <p><span>待付款</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11" class="ax_default heading_3">
        <div id="u11_div" class=""></div>
        <div id="u11_text" class="text ">
          <p><span>我的消息</span></p>
        </div>
      </div>
    </div>

</template>

<script>

import CURDHelper from '@/utils/CURDHelper'
import MyTodo from '@/components/Todo'
import PageConfig from '@/utils/pageConfig'
import XEUtils from 'xe-utils'
import { VxeUI } from 'vxe-pc-ui';
export default {
  name: 'Dashboard',
  components: {
    MyTodo
  },
  data() {
    return {
      TodoList: [],
      J1List:[],
      J2List:[],
      DskList:[],
      DkzList:[],
      duration: PageConfig.Duration,
      componentSize: PageConfig.ComponentSize,
    }
  },
  mounted() {
    this.IntervalTask();
    this.GetMessage();
    this.GetData();
  },
  computed: {

  },
  created() {
    
  },
  methods: {
    IntervalTask() {
      setInterval(() => {
        this.GetMessage();
        this.GetData();
      }, 30 * 60 * 1000);
    },
    GetMessage() {
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [],
        orderByConditions: [{
          column:'id',
          condition:'desc'
        }]
      }
      CURDHelper.Query(request, '/api/tpmmessage')
        .then(res => {
          this.TodoList = [];
          res.data.forEach(p => {
            this.TodoList.push(p);
          })
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })
    },
    GetData() {
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [],
        orderByConditions: []
      }
      CURDHelper.Query(request, 'api/report/getfirstdata2')
        .then(res => {
          this.J1List  = res.data.djytx;
          this.J2List  = res.data.djetx;
          this.DskList = res.data.dsk;
          this.DkzList = res.data.dkz;
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })
    },
    handleMessageRead(e){

    },
    hanndleMessageDetail(e){

    }
  }
}
</script>
<style scoped>
.ax_default {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:13px;
  letter-spacing:normal;
  color:#333333;
  vertical-align:none;
  text-align:left;
  line-height:normal;
  text-transform:none;
}
.box_1 {
}
.heading_1 {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:bold;
  font-style:normal;
  font-size:32px;
  text-align:left;
}
.heading_2 {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:bold;
  font-style:normal;
  font-size:24px;
  text-align:left;
}
.heading_3 {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:bold;
  font-style:normal;
  font-size:18px;
  text-align:left;
}
.heading_4 {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:bold;
  font-style:normal;
  font-size:14px;
  text-align:left;
}
.heading_5 {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:bold;
  font-style:normal;
  text-align:left;
}
.heading_6 {
  font-family:'Arial Normal', 'Arial', sans-serif;
  font-weight:bold;
  font-style:normal;
  font-size:10px;
  text-align:left;
}
.paragraph {
  text-align:left;
}
.form_hint {
  color:#999999;
}
.form_disabled {
}
textarea, select, input, button { outline: none; }

.body {
  margin:-30px;
  background-color:rgba(242, 242, 242, 1);
  background-image:none;
  position:relative;
  width: 100%;
  height: 100%;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.form_sketch {
  border-color:transparent;
  background-color:transparent;
}
#base {
  position:absolute;
  z-index:0;
}
#u0_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:96px;
  height:37px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u0 {
  border-width:0px;
  position:absolute;
  left:96px;
  top:50px;
  width:96px;
  height:37px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u0 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u0_text {
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}
#u1_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:440px;
  height:28px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u1 {
  border-width:0px;
  position:absolute;
  left:96px;
  top:112px;
  width:440px;
  height:28px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u1 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u1_text {
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}
#u2_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:450px;
  height:300px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:8px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  overflow: auto;
}
#u2 {
  border-width:0px;
  position:absolute;
  left:96px;
  top:217px;
  width:450px;
  height:300px;
  display:flex;
}
#u2 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#u2_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#u3_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:450px;
  height:300px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:8px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  overflow: auto;
}
#u3 {
  border-width:0px;
  position:absolute;
  left:586px;
  top:217px;
  width:450px;
  height:300px;
  display:flex;
}
#u3 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#u3_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#u4_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:450px;
  height:300px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:8px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  overflow: auto;
}
#u4 {
  border-width:0px;
  position:absolute;
  left:96px;
  top:557px;
  width:450px;
  height:300px;
  display:flex;
}
#u4 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#u4_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#u5_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:450px;
  height:300px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:8px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  overflow: auto;
}
#u5 {
  border-width:0px;
  position:absolute;
  left:586px;
  top:557px;
  width:450px;
  height:300px;
  display:flex;
}
#u5 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#u5_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#u6_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:375px;
  height:640px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:8px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
}
#u6 {
  border-width:0px;
  position:absolute;
  left:1076px;
  top:217px;
  width:375px;
  height:640px;
  display:flex;
}
#u6 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#u6_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#u7_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:54px;
  height:21px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u7 {
  border-width:0px;
  position:absolute;
  left:96px;
  top:186px;
  width:54px;
  height:21px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u7 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u7_text {
  margin-top: -15px;
  color: #003366;
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}
#u8_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:54px;
  height:21px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u8 {
  border-width:0px;
  position:absolute;
  left:586px;
  top:186px;
  width:54px;
  height:21px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u8 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u8_text {
  margin-top: -15px;
  color: #003366;
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}
#u9_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:54px;
  height:21px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u9 {
  border-width:0px;
  position:absolute;
  left:96px;
  top:531px;
  width:54px;
  height:21px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u9 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u9_text {
  margin-top: -15px;
  color: #003366;
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}
#u10_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:54px;
  height:21px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u10 {
  border-width:0px;
  position:absolute;
  left:586px;
  top:531px;
  width:54px;
  height:21px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u10 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u10_text {
  margin-top: -15px;
  color: #003366;
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}
#u11_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:72px;
  height:21px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u11 {
  border-width:0px;
  position:absolute;
  left:1076px;
  top:186px;
  width:72px;
  height:21px;
  display:flex;
  font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight:700;
  font-style:normal;
}
#u11 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u11_text {
  margin-top: -15px;
  color: #003366;
  border-width:0px;
  white-space:nowrap;
  text-transform:none;
}

</style>